<template>
  <div>
    <el-upload
      :action="url"
      :on-success="handleSuccess"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      :before-upload="checkFileType"
      :limit="element.options.length"
      :headers="headers"
      :multiple="false"
      :on-exceed="handleExceed"
      :file-list="dataModel||[]"
      :disabled="element.options.disabled"
      :style="{ width: element.options.width }"
    >
      <div v-if="!preview">
        <el-button
          id="no-print"
          size="small"
          type="primary"
        >点击上传</el-button>
        <div slot="tip" class="el-upload__tip">{{ element.options.tip }}</div>
      </div>
      <!-- <el-button
        type="primary"
        @click="isShow = true"
        >文件预览</el-button
      > -->
    </el-upload>
    <el-dialog
      title="文件预览"
      :visible="isShow"
      width="40%"
      append-to-body
      @close="isShow = false"
    />
  </div>
</template>

<script>
import { getNewToken } from '@/utils/auth'
export default {
  name: 'FileUpload',
  // eslint-disable-next-line vue/require-prop-types
  props: ['element', 'preview', 'dataModel', 'index'],
  data() {
    return {
      // url: process.env.VUE_APP_BASE_API + '/api/v1/public/uploadFile',
      url: process.env.VUE_APP_NEW_BASE_API + '/fileupload/imgUpload',
      fileListTmp: [],
      headers: {
        Authorization: 'Bearer ' + getNewToken()
      },
      isShow: false
    }
  },
  methods: {
    checkFileType(file) {
      const fileName = file.name
      const fileType = fileName.substring(fileName.lastIndexOf('.'))
      if (
        fileType !== '.jpg' &&
        fileType !== '.jpeg' &&
        fileType !== '.png' &&
        fileType !== '.pdf' &&
        fileType !== '.doc' &&
        fileType !== '.docx' &&
        fileType !== '.xls' &&
        fileType !== '.xlsx'
      ) {
        this.$message.error(`文件格式不支持`)
        return false
      }
      return true
    },
    handleRemove(file, fileList) {
      // console.log("删除111",file)
      // this.fileListTmp = fileList
      // const filesUrl = fileList.map(item=>item.response.resData.records[0].src).join(',')
      const _fileList = fileList.map(item => {
        if (item.response) {
          return {
            name: item.name,
            uid: item.response.resData.records[0].title,
            url: item.response.resData.records[0].url,
            src: item.response.resData.records[0].src
          }
        } else {
          return {
            name: item.name,
            uid: item.title,
            url: item.url,
            src: item.src
          }
        }
      })
      // 带入index,用于判断是第几个数组
      if (this.index >= 0) {
        this.$emit('fileList', { files: _fileList, index: this.index })
      } else {
        this.$emit('fileList', _fileList)
      }
    },
    handlePreview(file) {
      if (!this.preview) {
        return
      }
      // window.open(file.url, "_blank");
      // console.log(1111,file)
      console.log(file)
      const title = '文件预览'
      let url = ''
      if (file.response) {
        url = file.response.resData.records[0].url
      } else {
        url = file.url
      }
      // const url = file.response.resData.records[0].url
      const newWindow = window.open('about:blank', title)
      newWindow.document.title = title
      const iframe = document.createElement('iframe')
      iframe.src = url
      iframe.style.width = '100%'
      iframe.style.height = '100vh'
      iframe.style.margin = '0'
      iframe.style.padding = '0'
      iframe.style.overflow = 'hidden'
      iframe.style.border = 'none'
      newWindow.document.body.style.margin = '0'
      newWindow.document.body.appendChild(iframe)
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `最多允许上传 ${this.element.options.length} 个文件。`
      )
    },
    beforeRemove(file, fileList) {
      // return this.$confirm(`确定要移除 ${file.name}？`);
    },
    handleSuccess(response, file, fileList) {
      // if (response.code == -1) {
      //   this.$message.error(`${response.msg} `)
      //   return
      // }

      /* console.log(552332,fileList)

      console.log("fileListTmp",this.fileListTmp)
      this.fileListTmp.push({
        uid: file.uid,
        name: file.name,
        url: response.resData.records[0].src
      })*/

      // const filesUrl = fileList.map(item=>item.response.resData.records[0].src).join(',')
      console.log(fileList)
      const _fileList = fileList.map(item => {
        if (item.response) {
          return {
            name: item.name,
            uid: item.response.resData.records[0].title,
            url: item.response.resData.records[0].url,
            src: item.response.resData.records[0].src
          }
        } else {
          return {
            name: item.name,
            uid: item.title,
            url: item.url,
            src: item.src
          }
        }
      })
      // 带入index,用于判断是第几个数组
      if (this.index >= 0) {
        this.$emit('fileList', { files: _fileList, index: this.index })
      } else {
        this.$emit('fileList', _fileList)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-upload__tip {
    position: absolute;
    left: 90px;
    top: 5px;
    line-height: normal;
    width: 500px;
}
</style>
